<template>
    <!-- 照片 - 渲染组件 -->
    <el-image v-show="imgSrc" class="render-picture"
        :style="{
            'width': `${element.options.width}px`,
            'height': `${element.options.height}px`
        }"
        :src="imgSrc"
        :fit="element.options.fit"
        :alt="element.options.alt">
    </el-image>
</template>

<script>
import { warning, success, errorInfo } from "@/utils/errorInfo";
export default {
    name: "RenderPicture",
    props: {
        Api: {
            type: Object
        },
        element: {
            type: Object
        }
    },
    data() {
        return {
            imgSrc: ""
        }
    },
    mounted() {
        this.$nextTick(() => {
            let src = this.element.options.src && this.element.options.src.split(',');
            if (src && src.length > 0) { // 已经绑定SRC
                let srcs = [];
                src.forEach((item) => {
                    let field = item.split(':');
                    let data = this.Api.options[Number(field[0])]?.data || null;
                    if (Array.isArray(data)) { // 数组，择为多页面渲染数据
                        srcs.push(data?.[this.apiIndex][field[1]] || '');
                    } else if (data) {
                        srcs.push(data?.[field[1]] || '');
                    }
                })
                this.imgSrc = srcs.find(item => item && item.length > 0) || "";
            } else {
                warning('未配置图片src路径');
                // this.imgSrc = 'http://124.128.27.151:8010/fileUrl/officialSeal/8e23e45002ba4b9284ad754a35f0db93_%E5%85%AC%E7%AB%A0-%E6%B9%96%E5%8C%97%E6%AD%A6%E8%8D%86%E9%AB%98%E9%80%9F%E5%85%AC%E8%B7%AF%E5%8F%91%E5%B1%95%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%28%E5%B7%B2%E5%8E%BB%E5%BA%95%29.png?Expires=1672110481&OSSAccessKeyId=2a1NiS6s8cb9G4mj&Signature=15xdXM7GymXRxyf%2FyxnVW8K9Iic%3D&'
            }
        })
    }
}
</script>
